<template>
  <div class="layout-container">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="226px">
        <h3 class="logo-title">小U商城后台</h3>
        <Navbar />
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="left">
            <el-button type="primary" size="mini" icon="el-icon-s-fold"></el-button>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">管理中心</el-breadcrumb-item>
              <el-breadcrumb-item>功能页面</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button size="mini" circle icon="el-icon-back"></el-button>
          </div>
          <div class="right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                admin
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                    <i class="el-icon-user"></i>
                    个人信息</el-dropdown-item>
                <el-dropdown-item >
                    <i class="el-icon-full-screen"></i>全屏预览</el-dropdown-item>
                <el-dropdown-item @click='logout' command='logout'>
                    <i class="el-icon-switch-button"></i>安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体区域 -->
        <el-main>
            <!-- 二级路由出口 -->
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 导入左侧菜单
import Navbar from "../components/Navbar";
export default {
  components: { Navbar },
  methods:{
    fullScreen(){},
      userInfo(){},
      logout(){
        sessionStorage.removeItem('userinfo')
        this.$success('退出登录')
        this.$router.push('/login')


      },
      handleCommand(command){
        this[command]()
      }
    
  }
};
</script>

<style lang="less" scoped>
.layout-container {
  height: 100vh;
  .el-container {
    height: 100%;
    overflow: hidden;
    .el-header {
      background-color: #fff;
      color: #333;
      line-height: 60px;
      box-shadow: 0 0 4px 2px #999;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 60px;
      .left {
        display: flex;
        align-items: center;
        .el-breadcrumb {
          margin: 0 10px;
        }
      }
    //   .right {
    //     //   border:1px solid red;
    //   }
    }
    .logo-title {
      line-height: 60px;
      background-color: #444444;
      color: #fff;
      letter-spacing: 2px;
      font-weight: normal;
      text-align: center;
    }
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // border-right: 0;
}
</style>